<template>
    <div class="login">
        <h1>找回登入密碼</h1>
        <div class="tabs">
            <div class="tab-item" :class="activeTab == 0 ? 'active' : ''" @click='tabChange(0)'>
                手機找回
                <p ></p>
            </div>
            <div class="tab-item" :class="activeTab == 1 ? 'active' : ''" @click='tabChange(1)'>
                郵箱找回
                <p ></p>
            </div>
        </div>
        <div class="container" v-if='activeTab == 0'>
            <el-form label-width="120px">
                <el-form-item label='國家'>
                    <el-select v-model='formData.nation_id' class='width100'>
                        <el-option 
                            v-for='item in $store.state.nation' 
                            :key='item.id' 
                            :label='`${item.title}-${item.code}`' 
                            :value='item.id'></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手機號">
                    <el-input placeholder="手機號" v-model="formData.telephone">
                        <el-button slot="append" type='text' style='font-size:14px;width:140px;' @click='getCode' :disabled="disabled">{{code_btn_text}}</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label='驗證碼'>
                    <el-input placeholder="驗證碼" v-model="formData.code" ></el-input>
                </el-form-item>
                <el-form-item label='新密碼'>
                    <el-input placeholder="新密碼" v-model="formData.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label='確認新密碼'>
                    <el-input placeholder="確認新密碼" v-model="formData.pwd1" type="password"></el-input>
                </el-form-item>
            </el-form>
            <el-button size='medium' type='primary' @click='confirmResetByTelephone'>確認重置</el-button>
        </div>
        <!-- 邮箱找回 -->
        <div class="container" v-if='activeTab == 1'>
			<el-form label-width='120px'>
				<el-form-item label='郵箱'>
					<el-input placeholder="郵箱" v-model='formData.email'>
						 <el-button slot="append" type='text' style='font-size:14px;width:140px;' @click='getCode' :disabled="disabled">{{code_btn_text}}</el-button>
					</el-input>
				</el-form-item>
				<el-form-item label='驗證碼'>
				    <el-input placeholder="驗證碼" v-model="formData.code" ></el-input>
				</el-form-item>
				<el-form-item label='新密碼'>
				    <el-input placeholder="新密碼" v-model="formData.password" type="password"></el-input>
				</el-form-item>
				<el-form-item label='確認新密碼'>
				    <el-input placeholder="確認新密碼" v-model="formData.pwd1" type="password"></el-input>
				</el-form-item>
			</el-form>
			<el-button size='medium' type='primary' @click='confirmResetByTelephone'>確認重置</el-button>
        </div>
    </div>
</template>

<script>
    import {ResetLoginPwd } from '@/api/user'
    import { GetTelephoneCode, GetEmailCode } from '@/api/common'
    export default {
        data() {
            return {
                activeTab : 0,
                formData : {
                    telephone : null,
                    email : null,
                    password : null,
                    pwd1 : null,
                    code : null,
                    nation_id : 1
                },
                code_btn_text : '發送驗證碼',
                disabled : false,
                time_count : 60
            };
        },
        methods :{
            tabChange (tab) {
                this.activeTab = tab;
                this.formData = {
                    telephone : null,
                    email : null,
                    password : null,
                    code : null
                }
            },
            //获取验证码
            getCode () {
                if (this.activeTab == 0 && !this.formData.telephone) {
                    this.$alert('請輸入手機號碼', '提示');
                    return;
                }
                if (this.activeTab == 1 && !this.formData.email) {
                	this.$alert('請輸入郵箱地址', '提示');
                	return;
                }
				
				if (this.activeTab == 0) {
					GetTelephoneCode({
					    record_type : 'reset',
					    telephone : this.formData.telephone,
					    nation_id : this.formData.nation_id
					}).then(_ => {
					    this.disabled = true;
					    this.$message({
					        message : '驗證碼發送成功',
					        type : 'success'
					    })
					    this.timeCountHandle()
					})
				} else {
					let emailReg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
					if (!emailReg.test(this.formData.email)) {
						this.$alert('請輸入合法的郵箱地址', '提示')
						return;
					}
					GetEmailCode({
						record_type : 'reset',
						email :this.formData.email
					}).then(res => {
						this.disabled = true;
						this.$message({
						    message : '驗證碼發送成功',
						    type : 'success'
						})
						this.timeCountHandle()
					})
				}
				
                
            },
            timeCountHandle (){
                this.time_count -= 1;
                this.code_btn_text = `${this.time_count}s後重新發送`;
                setTimeout(_ => {
                    if (this.time_count <= 0) {
                        this.disabled = false;
                        this.time_count = 10;
                        this.code_btn_text = `重新發送`
                    } else {
                        this.timeCountHandle();
                    }
                }, 1 *1000)
            },
            confirmResetByTelephone () {
                if (this.activeTab == 0 && !this.formData.telephone) {
                    this.$alert('請輸入您的手機號碼', '提示')
                    return;
                }
				if (this.activeTab == 1 && !this.formData.email) {
					this.$alert('請輸入郵箱地址', '提示')
					return;
				}
                if (!this.formData.code) {
                    this.$alert('請填寫收到的驗證碼', '提示')
                    return;
                }
                if (!this.formData.password) {
                    this.$alert('請輸入新密碼', '提示')
                    return;
                }
                if (!this.formData.pwd1) {
                    this.$alert('請再次確認新密碼', '提示')
                    return;
                }
                if (this.formData.password.length < 6) {
                    this.$alert('登入密碼必須大於6比特', '提示');
                    return;
                }
                if (this.formData.password != this.formData.pwd1) {
                    this.$alert('兩次輸入的密碼不一致，請重新輸入', '提示')
                    return;
                }
                
                ResetLoginPwd({
                    reset_type : this.activeTab == 0 ? 'telephone' :'email',
                    telephone : this.formData.telephone,
                    email : this.formData.email,
                    password : this.formData.password,
                    code : this.formData.code
                }).then(res => {
                    this.$alert('密碼重置成功！', '提示', {
                        callback : _ => {
                            this.$router.replace('/login')
                        }
                    })
                })
            }
        }
     }
</script>
<style lang="less" scoped>
    @import url('../assets/css/_b.less');
    @media screen and (max-width : 670px) {
        .login {
            background: #fff;
            padding: 40px 10px;
            h1 {
                text-align: center;
                font-size: 30px;
                color: rgb(9, 36, 68);
                font-family: "PingFang SC", sans-serif;
                line-height: normal;
                letter-spacing: 0.1px;
                margin-bottom: 44px;
                font-weight: 500;
            }
            .tabs {
                .f-s();
                width: 300px;
                margin : 0 auto;
                font-family: Cabin, sans-serif;
                font-size: 18px;
                font-weight: bold;
                line-height: normal;
                letter-spacing: normal;
                text-align: center;
                margin-bottom: 30px;
                color: rgba(9, 42, 68, 0.7);
                p {
                    width: 30px;
                    height: 4px;
                    background-color: #fff;
                    // margin-top: 10px;
                    display: block;
                    margin : 10px auto;
                    border-radius: 2px;
                    
                }
                div {
                    cursor: pointer;
                    width: 50%;
                    text-align: center;
                }
                .active {
                    color :@mainColor;
                    p {
                        background: @mainColor;
                    }
                }
            }
            .container {
                // width: 390px;
                margin: 0 auto;
                .el-input {
                    margin-bottom: 15px;
                }
                .el-button {
                    display: block;
                    width: 100%;
                    font-size: 20px;
                    padding: 15px 0;
                }
                .s-b {
                    margin-top: 15px;
                    a {
                        font-size: 14px;
                        color: @mainColor;
                    }
                    
                }
            }
        }
    }
    @media screen and (min-width : 670px) {
        .login {
            width: 1200px;
            box-shadow: rgba(225, 234, 240, 0.8) 0px 4px 8px 0px;
            background-color: rgb(255, 255, 255);
            margin: 90px auto 30px;
            padding: 40px 0px;
            h1 {
                text-align: center;
                font-size: 30px;
                color: rgb(9, 36, 68);
                font-family: "PingFang SC", sans-serif;
                line-height: normal;
                letter-spacing: 0.1px;
                margin-bottom: 44px;
                font-weight: 500;
            }
            .tabs {
                .f-s();
                width: 300px;
                margin : 0 auto;
                font-family: Cabin, sans-serif;
                font-size: 18px;
                font-weight: bold;
                line-height: normal;
                letter-spacing: normal;
                text-align: center;
                margin-bottom: 30px;
                color: rgba(9, 42, 68, 0.7);
                p {
                    width: 30px;
                    height: 4px;
                    background-color: #fff;
                    // margin-top: 10px;
                    display: block;
                    margin : 10px auto;
                    border-radius: 2px;
                    
                }
                div {
                    cursor: pointer;
                    width: 50%;
                    text-align: center;
                }
                .active {
                    color :@mainColor;
                    p {
                        background: @mainColor;
                    }
                }
            }
            .container {
                width: 500px;
                margin: 0 auto;
                .el-input {
                    margin-bottom: 15px;
                }
                .el-button {
                    display: block;
                    width: 100%;
                    font-size: 20px;
                    padding: 15px 0;
                }
                .s-b {
                    margin-top: 15px;
                    a {
                        font-size: 16px;
                        color: @mainColor;
                    }
                    
                }
            }
        }
    }
</style>